<template>
  <div class="search">
    <search-input
      @update-search="search = $event"
      @chan-component="adviceShow = $event"
      :search="search"
    ></search-input>

    <component
      :is="adviceShow"
      :keywords="search"
      @chan-component="adviceShow=$event.com;search=$event.text;"
      @update:music="$emit('update:music', $event)"
      @update:playlist="$emit('update:playlist', $event)"
      :currentMusic="$attrs.currentMusic"
      :paused="$attrs.paused"
    ></component>

  </div>
</template>

<script>
import SearchInput from "./SearchInput";
import HotSearch from "./HotSearch";
import SearchAdvice from "./SearchAdvice";
import SearchResult from "./SearchResult";
// import SearcHistory from "./SearcHistory";
export default {
  components: {
    SearchInput,
    HotSearch,
    SearchAdvice,
    SearchResult,
  },
  data() {
    return {
      adviceShow: "HotSearch",
      search: "",
    };
  },
  watch: {
    search(n) {
      if(n!=""){
        // this.adviceShow = "SearchAdvice";
      }
      else{
        this.adviceShow = "HotSearch";
      }
    },
  },
  beforeCreate(){
    this.$root.isShowLoading = true;
  },
  mounted(){
    this.$root.isShowLoading = false;
  }
};
</script>

<style scoped lang="less">
.search{
  margin-top: 125px;
}
</style>